<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #gameContainer canvas {
      display:block;
    }

    div#webgl-content {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }

    div#loadingBox {
      width: 100%;
      height: 0px;
      position: absolute;
      top: 50%;
      margin-top: 137px;
      text-align: center;
    }

    div#icon {
      width: 300px;
      height: 310px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -185px;
      margin-left: -150px;
      background-image: url("Template/anthill.png");
      background-repeat: no-repeat;
      box-shadow: 1px 1px 5px #141414;
    }

    div#box {
      width: 328px;
      height: 367px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -199px;
      margin-left: -164px;
      background: #222;
      box-shadow: 1px 1px 5px #000;
    }

    div#bgBar {
      display: none;
      position: absolute;
      width: 300px;
      margin-left: -150px;
      left: 50%;
      height: 18px;
      background-color: #882121;
      box-shadow: 1px 1px 5px #111;
    }

    div#progressBar {
      display: none;
      left: 50%;
      position: absolute;
      margin-left: -150px;
      width: 0px;
      height: 18px;
      background-color: #dc4241;
    }

    p#loadingInfo {
      color: #fff;
      letter-spacing: 1px;
      position: absolute;
      width: 100%;
      font-family: sans-serif;
      text-align: center;
      top: 50%;
      font-size: 11px;
      font-weight: 500;
      margin-top: 140px;
      text-shadow: 0px 0px 5px #000;
    }

    div#spinner {
      position: absolute;
      height: 18px;
      left: 50%;
      margin-left: -150px;
      width: 300px;
      position: relative;
      overflow: hidden;
      background-color: #882121;
      box-shadow: 1px 1px 5px #111;
    }

    div#spinner:before {
      display: block;
      position: absolute;
      content: "";
      width: 150%;
      margin-left: -10px;
      height: 10px;
      background-color: #e85352;
      transform: rotate(-5deg);
      animation: loading 1s linear infinite;
    }

    @keyframes loading {
      from {
        top: -185%
      }
      to {
        top: 225%
      }
    }
  </style>

  <script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'>
  </script>

  <script src="%UNITY_WEBGL_LOADER_URL%"></script>
  <script>
    function UnityProgress(gameInstance, progress) {
      var container = document.getElementById('gameContainer');
      if (container) document.body.style.background = container.style.background;

      if (!gameInstance.Module) {
         return;
      } else if (progress === "complete") {
        document.getElementById("loadingBox").style.display = "none";
        document.getElementById("icon").style.display = "none";
        document.getElementById("loadingInfo").style.display = "none";
        document.getElementById("box").style.display = "none";
        return;
      } else if (progress == 1) {
        document.getElementById("loadingInfo").innerHTML = "PROCESSING...";
        document.getElementById("spinner").style.display = "inherit";
        document.getElementById("bgBar").style.display = "none";
        document.getElementById("progressBar").style.display = "none";
      } else if (progress > 0) {
        document.getElementById("progressBar").style.width = 300 * progress + "px"
        document.getElementById("loadingInfo").innerHTML = Math.round(progress * 100) + "%";
        document.getElementById("spinner").style.display = "none";
        document.getElementById("bgBar").style.display = "block";
        document.getElementById("progressBar").style.display = "inherit";
      }
    }
    var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {
      onProgress: UnityProgress,
      Module: {
        onRuntimeInitialized: function() { UnityProgress(gameInstance, "complete") }
      }
    });
  </script>
</head>
<body>
  <div id="webgl-content" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px">
    <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div>
  </div>
  <div id="box"></div>
  <div id="loadingBox">
    <div id="spinner"></div>
    <div id="bgBar"></div>
    <div id="progressBar"></div>
  </div>
  <a target="_blank" href="http://www.kongregate.com"> <div id="icon"></div> </a>
  <p id="loadingInfo"></p>
</body>
</html>
